import { BrowserRouter } from "react-router-dom";
import Footer from "./components/footer";
import Header from "./components/header";
import React, { memo } from 'react'
import { renderRoutes } from "react-router-config";
import routes from "./route";
import { Provider } from "react-redux";
import store from "./store";
import { Suspense } from "react";
import { Spin } from 'antd';

export default memo(function App() {
  return (
    <Provider store={store}>
      <BrowserRouter>
        <Header />
        <Suspense fallback={renderLoading()}>
        {renderRoutes(routes)}
        </Suspense>
        <Footer />
      </BrowserRouter>
    </Provider>
  );

  function renderLoading() {
    return <div className="wrap-v1" style={{textAlign: "center"}}>
      <Spin tip="Loading..."/>
    </div>
  }
})
